<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http_equiv="X_UA_Compatible" content="ie=edge">
    <title>组织结构树</title>
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="../assets/fontscrm/iconfont.css">
    <link rel="stylesheet" href="../assets/css/channel_reset.css">
    <link rel="stylesheet" href="../assets/dialog/htf_channel_dialog.css">
    <link rel="stylesheet" href="组织结构树.css">
</head>

<body>
    <div class="main_con">
        <div class="content">
            <div class="content_inner pt10">
                <div class="title_box flexCenter">
                    <ul class="period highlight_red ml0">
                        <li class="active" data-selectid="10"><a href="javascript:;">今年以来</a></li>
                        <li data-selectid="20"><a href="javascript:;">历史</a></li>
                    </ul>
                </div>
                <div class="table_outer no_records_found_height form_msg" style="position: relative">
                    <div class="list_table tree_map" id="tree_map" style="display:none">
                        <div class="svgcontainer" id="svgcontainer"></div>
                        <!-- 树内容 -->
                        <div id="tree_map_content">

                        </div>
                        <!-- 图例legend -->
                        <div class="tree_legend">
                            <div class="tree_legend_text flexBetween">
                                <span>最小</span>
                                <span>最大</span>
                            </div>
                            <ul class="flexStart">
                                <li class="bg_red"></li>
                                <li class="bg_orange"></li>
                                <li class="bg_yellow"></li>
                                <li class="bg_blue"></li>
                                <li class="bg_purple"></li>
                            </ul>
                            <div class="tree_legend_text flexCenter">
                                <span>拜访次数</span>
                            </div>
                        </div>
                        <!-- 工具tools -->
                        <div class="tree_tools">
                            <ul>
                                <li id="tree_enlarge">
                                    <p><i class="icon iconguanbi1"></i></p>
                                    <p>放大</p>
                                </li>
                                <li id="tree_narrow">
                                    <p><i class="icon iconguanbi1"></i></p>
                                    <p>缩小</p>
                                </li>
                                <li id="tree_fullScreen">
                                    <p><i class="icon iconguanbi1"></i></p>
                                    <p>全屏</p>
                                </li>
                                <li id="tree_edit">
                                    <p><i class="icon iconguanbi1"></i></p>
                                    <p>编辑</p>
                                </li>
                                <li id="tree_save">
                                    <p><i class="icon iconxiazai"></i></p>
                                    <p>保存</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="table_loading" style="height: 360px;padding: 50px;">
                        <span class="page_change_loading_wrap"><span class="page_change_loading_text"></span><span
                                class="animation_wrap"><span class="page_change_dot"></span></span></span>
                    </div>
                    <div class="noData_box" style="display: none;">
                        <i class="icon iconwushuju"></i>
                        <p>暂无数据</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 圆点转圈loading -->
    <div class="modal fade" id="loadModel" data-backdrop="static" style="background:rgba(255,255,255,0);">
        <div class="modal-dialog">
            <div class="load4">
                <div class="loader"></div>
            </div>
        </div>
    </div>
    <script src="../assets/js/jquery_3.4.1.min.js"></script>
    <script src="../assets/bootstrap/js/bootstrap.js"></script>
    <script src="../assets/js/bootstrap-datetimepicker.js"></script>
    <script src="../assets/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../assets/dialog/htf_channel_dialog.js"></script>
    <script src="../assets/fontscrm/iconfont.js"></script>
    <!-- 公共方法 -->
    <script src="../assets/js/CommonUtil.js"></script>
    <script src="../assets/js/echarts.min.js"></script>
    <!-- 导出图片 -->
    <script src="../assets/js/html2canvas.js"></script>
    <script src="../assets/js/jspdf.debug.js"></script>
    <!-- template -->
    <script src="../assets/js/template.js"></script>
    <!-- 数据 -->
    <script src="./data1.json"></script>
    <script>
        // 字符串转换
        template.helper("fromatItem", function (item) {
            return JSON.stringify(item);
        });
        // 拜访等级 横线颜色
        template.helper("visitColor", function (visitnum) {
            let colorClass = ''
            if(visitnum >= 0 && visitnum < 10){
                colorClass = 'bg_red'
            }
            if(visitnum >= 10 && visitnum < 20){
                colorClass = 'bg_orange'
            }
            if(visitnum >= 20 && visitnum < 30){
                colorClass = 'bg_yellow'
            }
            if(visitnum >= 30 && visitnum < 40){
                colorClass = 'bg_blue'
            }
            if(visitnum >= 40 ){
                colorClass = 'bg_purple'
            }
            return colorClass;
        });
        // 嵌套模板
        template.helper("template_tree_map_content_data", function (dataCur) {
            return template("tree_map_content_data", dataCur);
        });
    </script>
    <!-- 树数据渲染 -->
    <script type="text/template" id="tree_map_content_data">
        {{each data as itm idx}}
            {{if itm.isTop }}
                <div class="flexAround">
                    <div class="tree_assembly tree_top">
                        <p class="ellipsis_p">{{itm.AgencyName}}</p>
                    </div>
                </div>
            {{else}}
                <!-- 子机构 -->
                <div class="flexAround">
                    <div class="tree_assembly tree_sub">
                        <div class="tree_sub_name">{{itm.AgencyName}}
                            <p class="tree_triangle"></p></div>
                        <div class="tree_sub_msg">
                            <p class="tree_sub_msg_title">
                                <span>规模：</span>
                                <span>2345亿</span>
                                <i class="icon iconzhankaishouqi2 tree_sub_msg_show_detail"></i>
                            </p>
                            <div class="tree_sub_msg_detail">
                                <ul>
                                    <li>
                                        <p>
                                            <span class="tree_dot"></span>
                                            <span class="tree_label">较上季度变化:</span>
                                        </p>
                                        <p class="color_red">
                                            <span class="tree_value">45亿</span>
                                            <i class="icon iconshangjiantou2"></i>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            <span class="tree_dot"></span>
                                            <span class="tree_label">较年初变化:</span>
                                        </p>
                                        <p class="color_red">
                                            <span class="tree_value">115亿</span>
                                            <i class="icon iconshangjiantou2"></i>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            <span class="tree_dot"></span>
                                            <span class="tree_label">较上月变化:</span>
                                        </p>
                                        <p class="color_green">
                                            <span class="tree_value">5亿</span>
                                            <i class="icon iconxiajiantou2"></i>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            <span class="tree_dot"></span>
                                            <span class="tree_label">公募:</span>
                                        </p>
                                        <p class="color_green">
                                            <span class="tree_value">245亿</span>
                                            <i class="icon iconxiajiantou2"></i>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            <span class="tree_dot"></span>
                                            <span class="tree_label">专户:</span>
                                        </p>
                                        <p class="color_red">
                                            <span class="tree_value">23455亿</span>
                                            <i class="icon iconshangjiantou2"></i>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            {{/if}}
            {{if itm.contactor1 && itm.contactor1.length > 0 }}
                {{each itm.contactor1 as itmContactor1 idxContactor1}}
                    <!-- 联系人 -->
                    <div class="flexAround">
                        <div class="tree_assembly tree_human">
                            <div class="tree_human_bg">
                                <p class="tree_human_img"><!-- <img id="aaa" src="D:/AAAWork/assets/images/human.jpg"> --></p>
                                <p class="tree_human_msg"><span class="tree_human_position">{{itmContactor1.position}}</span><span class="tree_human_name">{{itmContactor1.name}}</span></p>
                                <p class="tree_human_visitnum">{{itmContactor1.visitNum}}</p>
                            </div>
                            <div class="tree_human_bg overflow_hidden">
                                <p class="tree_human_bottomborder {{visitColor(itmContactor1.visitNum)}}"></p>
                            </div>
                        </div>
                    </div>
                {{/each}}
            {{/if}}
            {{if itm.contactor2 && itm.contactor2.length > 0 }}
                <div class="flexAround tree_layer_line">
                    {{each itm.contactor2 as itmContactor2 idxContactor2}}
                        <!-- 联系人 -->
                        <div class="flexAround">
                            <div class="tree_assembly tree_human">
                                <div class="tree_human_bg">
                                    <p class="tree_human_img"><!-- <img id="aaa" src="D:/AAAWork/assets/images/human.jpg"> --></p>
                                    <p class="tree_human_msg"><span class="tree_human_position">{{itmContactor2.position}}</span><span class="tree_human_name">{{itmContactor2.name}}</span></p>
                                    <p class="tree_human_visitnum">{{itmContactor2.visitNum}}</p>
                                </div>
                                <div class="tree_human_bg overflow_hidden">
                                    <p class="tree_human_bottomborder {{visitColor(itmContactor2.visitNum)}}"></p>
                                </div>
                            </div>
                        </div>
                        {{if itmContactor2.data}}
                            {{ template_tree_map_content_data(itmContactor2) }}
                        {{/if}}
                    {{/each}}
                </div>
            {{/if}}
        {{/each}}
    </script>
    <script src="./组织结构树.js"></script>
</body>

</html>